<template>
	<view class="Step_one">
		<StepInput :title="'照片'" v-if="!audit">
			<image :src="query.avatar ? query.avatar :$IMG_URL('/static/user/upload.png')" mode="" class="upload_img"
				@tap.stop="changeAvatar"></image>
		</StepInput>
		<StepInput :title="'昵称'" class="mb">
			<u-input v-model="query.nickname" type="text" :border="false" input-align="right" placeholder="请填写昵称"
				:clearable="false" @input="changeNickname"/>
		</StepInput>
		<!--    -->
		<StepInput :title="'服务门店'" class="mb">
			<u-input :value="findshopName(shopList,query.shop_id_list)" type="text" :border="false" input-align="right"
				placeholder="请选择服务门店（可多选）" class="input_cs" :clearable="false" disabled @click.stop="handleInputClick" />
			<image :src="$IMG_URL('/static/home/indicate.png')" mode="" class="icon"></image>
		</StepInput>
		<!--  -->
		<StepInput :title="'擅长领域'" class="mb">
			<u-input :value="findDomainsByIdList(domainNameList,query.domain_id_list)" type="text" :border="false"
				input-align="right" placeholder="请选择擅长领域（可多选）" class="input_cs" :clearable="false" disabled
				@click="handleAreaClick" />
			<image :src="$IMG_URL('/static/home/indicate.png')" mode="" class="icon"></image>
		</StepInput>
		<!-- <StepInput :title="'出生日期'" class="mb">
			<u-input v-model="query.birthday" type="text" :border="false" input-align="right" placeholder="请选择出生日期"
				class="input_cs" disabled :clearable="false" @click.stop="birthShow" />
			<image :src="$IMG_URL('/static/home/indicate.png')" mode="" class="icon"></image>
		</StepInput> -->
		<StepInput :title="'入行时间'" class="mb">
			<u-input v-model="query.working" type="text" :border="false" input-align="right" placeholder="请选择入行时间"
				class="input_cs" disabled :clearable="false" @click.stop="experienceShow" />
			<image :src="$IMG_URL('/static/home/indicate.png')" mode="" class="icon"></image>
		</StepInput>
		<view class="comlum_Y mb">
			<view class="left">
				<view class="star">
					*
				</view>
				<view class="size">
					教言
				</view>
			</view>
			<u-input type="textarea"  v-model="query.bio" :border="false" :height="230" :auto-height="false"
				:clearable="false" :custom-style="customStyle" placeholder="请填写做教练的感悟，以供学员参考选择" @input="changeBio" />
		</view>
		<view class="comlum_Y">
			<view class="left">
				<view class="star">
					*
				</view>
				<view class="size">
					教练风采
				</view>
			</view>
			<view class="photo">
				<image :src="$IMG_URL('/static/user/upload.png')" mode="" class="upload"
					v-if="query.publicity_image_list.length < 9" @click.stop="addImage"></image>
				<view v-for="(item,index) in query.publicity_image_list" :key="index" class="Item"
					v-if="query.publicity_image_list.length">
					<image :src="item" mode="" class="img" @click.stop="$PREVIEW_IMAGE(item)"></image>
					<image :src="$IMG_URL('/static/user/close.png')" mode="" class="close" @click.stop="close(item, index)">
					</image>
				</view>
				
			</view>
		</view>

	</view>
</template>

<script>
	import StepInput from './StepInput.vue'
	import{
		versions
	} from '@/api/common.js'
	export default {
		components: {
			StepInput
		},
		props: {
			query: {
				type: Object,
				default: {},
				required: true
			},
			domainNameList: {
				type: Array,
				default: [],
				required: true
			},
			shopList: {
				type: Array,
				default: [],
				required: true
			},
		},
		data() {
			return {
				customStyle: {
					background: '#f6f6f6',
					padding: '32rpx'
				},
				couponShow: true,
				audit:0
			}
		},
		created() {
			this.getVersions()
		},
		methods: {
			getVersions(){
				versions().then(({data:res})=>{
					console.log('res', res);
					if(res.code == 1){
						this.audit = res.data.audit
					}
				})
			},
			findshopName(data, list) {
				const domains = [];
				var dName = ''
				if (data.length) {
					data.forEach(i => {
						if (list.length) {
							if (list.includes(i.shop_id)) {
								// 如果在，将domain添加到结果数组中
								domains.push(i.shop_name);
							}
						}
					})
				}
				if (domains.length >= 2) {
					dName = domains[0] + '等' + domains.length + '家'
				} else {
					dName = domains.join(',')
				}
				// 返回结果数组
				return dName;
			},
			// 擅长领域回显
			findDomainsByIdList(data, list) {
				const domains = [];
				var dName = ''
				if (data.length) {
					data.forEach(i => {
						if (i.territory.length) {
							i.territory.forEach(territory => {
								if (list) {
									if (list.includes(territory.domain_id)) {
										// 如果在，将domain添加到结果数组中
										domains.push(territory.domain);
									}
								}
							})
						}

					})
				}
				if (domains.length >= 3) {
					dName = domains[0] + '等' + domains.length + '个'
				} else {
					dName = domains.join(',')
				}
				// 返回结果数组
				return dName;
			},
			addImage() {
				this.$emit('addImage')
			},
			changeAvatar() {
				this.$emit('changeAvatar')
			},
			handleInputClick() {
				console.log('111');
				this.$emit('openService')
			},
			handleAreaClick() {
				this.$emit('openArea')
			},
			birthShow() {
				console.log('birthShow');
				this.$emit('birthShow')
			},
			experienceShow() {
				this.$emit('experienceShow')
			},
			close(item, index){
				this.$emit('close', index)
				// this.query.publicity_image_list.splice(index, 1)
			},
			changeNickname(e){
				this.$emit('changeNickname', e)
			},
			changeBio(e){
				console.log('e', e);
				this.$emit('changeBio', e)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mb {
		margin-bottom: 48rpx;
	}

	.Step_one {
		margin-top: 24rpx;
		width: 702rpx;
		background: #ffffff;
		border-radius: 16rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 40rpx;

		.mb {
			margin-bottom: 48rpx;
		}

		.comlum_Y {
			display: flex;
			flex-direction: column;
			width: 622rpx;

		}

		.left {
			display: flex;
			flex-direction: row;
			flex: 1;
			margin-bottom: 24rpx;

			.star {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Bold;
				font-weight: 700;
				text-align: left;
				color: #f37364;
			}

			.size {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Bold;
				font-weight: 700;
				text-align: left;
				color: #333333;
			}
		}

		.input_cs {
			width: 336rpx;
		}

		.icon {
			width: 10rpx;
			height: 16rpx;
			margin-left: 8rpx;
		}

		.upload_img {
			width: 204rpx;
			height: 204rpx;
		}

		.photo {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			flex-wrap: wrap;
			width: 100%;
		}

		.upload {
			width: calc((100% - 24rpx) / 3);
			height: 204rpx;
			margin-right: 12rpx;
			/* 右边距 */
			margin-bottom: 12rpx;
		}

		.upload:last-child {
			margin-right: 0;
			/* 如果是最后一个元素，移除右边距 */
		}

		.Item:nth-child(3n) {
			margin-right: 0;
			/* 每行的第三个元素没有右边距 */
		}

		.Item {
			width: calc((100% - 24rpx) / 3);
			/* 每行三个元素，包括间距 */
			height: 204rpx;
			background: rgba(0, 0, 0, 0.00);
			border-radius: 16rpx;
			overflow: hidden;
			position: relative;
			margin-right: 12rpx;
			/* 右边距 */
			margin-bottom: 12rpx;

			.close {
				position: absolute;
				right: 0;
				top: 0;
				width: 52rpx;
				height: 52rpx;
			}

			.img {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>